<template>
  <PageWrapper title="分类参数" contentFullHeight>
    <div class="card">
      <div class="category-wrapper">
        <span>选择商品分类：</span>
        <a-cascader
          style="width: 300px"
          v-model:value="state.cascaderValue"
          :options="state.cascaderOption"
          expand-trigger="hover"
          placeholder="请选择"
          @change="handleChange"
        />
      </div>
      <div class="mt-4">
        <a-tabs v-model:activeKey="state.activeKey" @change="handleTabChange">
          <a-tab-pane key="0" tab="动态参数">
            <attributesTable
              :attributesSelect="state.attributesSelect"
              @handle-add-attributes="handleAddAttributes"
              @handle-edit="handleEdit"
            />
          </a-tab-pane>
          <a-tab-pane key="1" tab="静态属性">
            <attributesTable
              :attributesSelect="state.attributesSelect"
              @handle-add-attributes="handleAddAttributes"
              @handle-edit="handleEdit"
            />
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
    <editModal
      @register="modalRegister"
      :id="state.categoryId"
      :isEdit="state.isEdit"
      :editRow="state.editRow"
      :attributesSelect="state.attributesSelect"
      @get-add-result="getAddResult"
      @update-attribute="updateAttribute"
    />
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { PageWrapper } from '/@/components/Page';
  import { onMounted, reactive, watch } from 'vue';
  import { useShopGoodsStore } from '/@/store/modules/shopGoodsStore';
  import { useModal } from '/@/components/Modal';
  import { message } from 'ant-design-vue';

  import editModal from './components/editModal.vue';
  import attributesTable from './components/attributesTable.vue';

  type stateType = {
    cascaderValue: any[];
    cascaderOption: any[];
    categoryId: number;
    activeKey: string;
    attributeList: any[];
    attributeValue: string;
    parameterList: any[];
    visible: boolean;
    isEdit: boolean;
    editRow: object;
    attributesSelect: string;
  };

  const shopGoodsStore = useShopGoodsStore();

  const [modalRegister, { openModal, getVisible }] = useModal();

  const state: stateType = reactive({
    cascaderValue: [],
    cascaderOption: [],
    categoryId: 0,
    activeKey: '0',
    attributeList: [],
    attributeValue: '',
    parameterList: [],
    visible: false,
    isEdit: false,
    editRow: {},
    attributesSelect: 'many',
  });

  const getCategories = async () => {
    try {
      state.cascaderOption = await shopGoodsStore.getCategoryList({ resultType: 'tree' });
    } catch (error) {
      console.error(error);
    }
  };

  const getAttributesList = async () => {
    try {
      await shopGoodsStore.getCategoryAttributeList({
        id: state.categoryId,
        sel: state.attributesSelect,
      });
      // shopGoodsStore.attributeList = attributeData;
    } catch (error) {
      console.error(error);
    }
  };

  const handleTabChange = (key: string) => {
    if (key == '0') {
      state.attributesSelect = 'many';
      getAttributesList();
    }
    if (key == '1') {
      state.attributesSelect = 'only';
      getAttributesList();
    }
  };

  const handleChange = async (value: any) => {
    if (value.length == 0) return;
    state.categoryId = value[value.length - 1];
    getAttributesList();
  };

  const handleEdit = (record: any) => {
    state.isEdit = true;
    state.editRow = record;
    openModal();
  };

  const updateAttribute = async (params: Array<any>) => {
    const id = params[0];
    const attr_id = params[1];
    const attr_name = params[2];
    const attr_vals = params[3];
    try {
      const row = await shopGoodsStore.updateAttributes({
        id,
        attr_id,
        attr_name,
        attr_sel: state.attributesSelect,
        attr_vals,
      });
      shopGoodsStore.attributeList = shopGoodsStore.attributeList.map((item: any) => {
        if (item.attr_id == row.attr_id) {
          item = row;
        }
        return item;
      });
      message.success('修改成功');
    } catch (error) {
      console.error(error);
    }
  };

  const handleAddAttributes = () => {
    if (state.cascaderValue.length != 3) return message.warn('请先选择商品分类');
    openModal();
  };

  const getAddResult = (row: any) => {
    shopGoodsStore.attributeList.push(row);
  };

  watch(
    () => getVisible?.value,
    () => {
      if (!getVisible?.value) {
        state.isEdit = false;
      }
    },
  );

  onMounted(() => {
    getCategories();
  });
</script>

<style lang="less" scoped>
  .card {
    padding: 24px;
    background-color: @component-background;
  }
</style>
